<template>
  <div>
    <div class="dashboard-container">
      

      <div class="big-back-box">
        <div class="top">服务商抢单列表</div>
      <div style="height: 20px"></div>
        <!-- 当前求助id编号 -->
        <div style="width: 600px; margin: 0 auto">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="求助id" style="width: 1000px">
              <span style="margin-left: 10px; font-size: 15px"
                ><b>{{ this.form.id }}</b></span
              >
            </el-form-item>
          </el-form>
        </div>
        <el-card class="box-card" style="margin: 0 auto">
          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="抢单编号" align="center" width="120">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="服务商ID" align="center" width="250">
              <template slot-scope="{ row }">
                <span>{{ row.serviceId }}</span
                >         
              </template>
            </el-table-column>
            <el-table-column label="自荐描述" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.selfRecommendationDescription }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.money }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="抢单时间" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.orderGrabbingTime }}</span>          
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="{ row }">
                <router-link to="/lawHelp/customerHelpList">
                  <el-button type="text" @click="chooseServiceProvider(row.id)"
                    >选择</el-button
                  >
                </router-link>
              </template>
            </el-table-column>
          </el-table>

          <router-link to="/lawHelp/customerHelpList">
            <el-button style="margin-top: 20px">返回</el-button>
          </router-link>

          <!-- 分页 -->
          <!-- <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          /> -->
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 获取当前登录账户信息
import { returnUserInformation } from "@/api/user.js";

// 通过法律求助id（和分页json）获取抢单表
import { getOrderGrabbingList } from "@/api/lawHelp.js";
// 根据抢单id选择服务商
import { selectServiceProvider } from "@/api/lawHelp.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
      },
      // 保存传过来的当前求助信息
      form: {},
      // 抢单信息列表
      tableData: [],
    };
  },
  // 初始化
  mounted() {
    console.log("mounted()");
    console.log("this.$route.query" + this.$route.query);
    this.form = this.$route.query; // 获取传过来的当前求助对象
    console.log("求助id this.form.id: " + this.form.id);

    this.init();
  },
  methods: {
    // 初始化
    init() {
      // alert("init():unread? this.searchType:" + this.searchType);
      console.log("init()");
      console.log("this.form.id: " + this.form.id);
      let dataPage = {
        pageNum: 1,
        pageSize: 5,
      };
      // 获取抢单自荐，传参：(页码json, 当前求助id)
      getOrderGrabbingList(dataPage, this.form.id).then((resp) => {
        console.log(
          "getOrderGrabbingList(dataPage, this.form.id) 接口获取抢单自荐列表"
        );
        console.log("resp:" + resp);
        console.log("resp.data:" + resp.data);
        console.log(
          "resp.data.OrderGrabbingList:" + resp.data.OrderGrabbingList
        );
        this.tableData = resp.data.OrderGrabbingList;
        console.log(
          "this.tableData[1].selfRecommendationDescription: " +
            this.tableData[1].selfRecommendationDescription
        );
      });
    },
    getList() {
      // 获取数据
    },
    // 选择服务商
    chooseServiceProvider(rowId) {
      // 接口
      selectServiceProvider(rowId).then((resp) => {
        console.log("selectServiceProvider(rowId)");
        console.log("resp.data.result: " + resp.data.result);
        console.log("resp.data.message: " + resp.data.message);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1100px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>